<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统时钟</title>
    <link rel="stylesheet" href="css/Animate.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bgc {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 150px auto;
        }

        .d1 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: olivedrab;
            border-radius: 50%;
        }

        .d2 {
            position: absolute;
            width: 260px;
            height: 260px;
            margin: 20px 20px;
            border-radius: 50%;
            background-color: white;
        }

        .d3 {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: olivedrab;
            margin: 135px 135px;
        }

        .d4 {
            position: absolute;
            width: 220px;
            height: 220px;
            background-color: white;
            border-radius: 50%;
            margin: 40px 40px;
        }

        .dd1 {
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(30deg);
        }

        .dd2 {
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(60deg);
        }

        .dd3 {
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(90deg);
        }

        .dd4 {
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(120deg);
        }

        .dd5 {
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(150deg);
        }

        .dd6 {
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px);
        }

        .second {
            position: absolute;
            width: 2px;
            height: 100px;
            background-color: blue;
            left: 50%;
            top: 50%;
            margin-left: -1px;
            margin-top: -100px;
            transform-origin: center bottom;

        }

        .minute {
            position: absolute;
            width: 4px;
            height: 80px;
            background-color: blueviolet;
            left: 50%;
            top: 50%;
            margin-left: -2px;
            margin-top: -80px;
            transform-origin: center bottom;

        }

        .hour {
            position: absolute;
            width: 6px;
            height: 60px;
            background-color: red;
            left: 50%;
            top: 50%;
            margin-left: -3px;
            margin-top: -60px;

            transform-origin: center bottom;

        }

    </style>
</head>
<body>
<div class="bgc">
    <div class="d1"></div>
    <div class="d2"></div>


    <div class="dd dd1"></div>
    <div class="dd dd2"></div>
    <div class="dd dd3"></div>
    <div class="dd dd4"></div>
    <div class="dd dd5"></div>
    <div class="dd dd6"></div>
    <div class="d4"></div>
    <div class="d3"></div>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
</div>
<script>
    var second = document.getElementsByClassName("second")[0];
    var minute = document.getElementsByClassName("minute")[0];
    var hour = document.getElementsByClassName("hour")[0];

    function time() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        h = h % 12;
        var hdeg = h * 30 + m / 2;
        var mdeg = m * 6;
        var sdeg = s * 6;
        hour.style.transform = "rotate(" + hdeg + "deg)";
        minute.style.transform = "rotate(" + mdeg + "deg)";
        second.style.transform = "rotate(" + sdeg + "deg)";
    }

    time();
    setInterval(time, 1000);
</script>
</body>
</html>